<template>
<div class="refuse">
  <div class="header">
    <mt-header fixed title="推广详情">
      <mt-button icon="back" slot="left" @click="back">返回</mt-button>
    </mt-header>
  </div>
  <div class="nav">
    <mt-navbar class="page-part" v-model="selected"  @click.native="navChange(selected)">
      <mt-tab-item id="1" >注册列表</mt-tab-item>
      <mt-tab-item id="2">充值金额</mt-tab-item>
    </mt-navbar>
    <div style="width: 100%;">
      <mt-tab-container v-model="selected">
        <mt-tab-container-item id="1">
          <div class="row-items">
            <div  class="col-item col-title">用户ID</div>
            <div  class="col-item col-title">注册时间</div>
            <div class="box"></div>
          </div>
            <mt-loadmore class="data-list" v-if="tableData" :bottom-method="loadBottom"
                         :bottom-all-loaded="allLoaded" :bottomPullText='bottomText' :bottomDistance="40"
                         ref="loadmore">
              <div class="row-item" v-for="item in tableData" :key="item.uid">
                <div class="col-items">{{item.uid}}</div>
                <div  class="col-items">{{formatDate(item.regTime)}}</div>
                <div class="box"></div>
              </div>
              <div class="loadOver" ref="loadOver">加载完毕</div>
            </mt-loadmore>
        </mt-tab-container-item>
        <mt-tab-container-item id="2">
          <div class="row-items">
            <div  class="col-item col-title">用户ID</div>
            <div  class="col-item col-title">充值时间</div>
            <div class="box"></div>
          </div>
            <mt-loadmore class="data-list" v-if="goldData" :bottom-method="loadBottomCharge"
                         :bottom-all-loaded="allLoadedCharge" :bottomPullText='bottomTextCharge' :bottomDistance="40"
                         ref="loadCharge">
              <div class="row-item" v-for="chargeData in goldData" :key="chargeData.uid">
                <div class="col-items">{{chargeData.uid}}</div>
                <div  class="col-items">{{ formatDate(chargeData.createTime)}}</div>
                <div class="box"></div>
              </div>
              <div class="loadOver" ref="loadCharge" v-show="isShow">加载完毕</div>
            </mt-loadmore>
        </mt-tab-container-item>
      </mt-tab-container>
    </div>
  </div>
</div>


</template>
<script type="es6">
  export default{
      data(){
          return {
            selected: '1',
            tableData:[],
            goldData:[],
            allLoaded: false,
            allLoadedCharge: false,
            bottomText:'上拉加载更多...',
            bottomTextCharge:'上拉加载更多...',
            timeData:'',
            spreadCodeData:'',
            pagesize:10,
            total:0,
            pageIndex:1,
            pageCount:0,
            pagesizeCharge:10,
            totalCharge:0,
            pageIndexCharge:0,
            pageCountCharge:0,
            isShow:false,
          }
       },
       created(){
         const self = this;

         //页面加载前
         var rq_data = JSON.parse(localStorage.getItem('rq_data'));

         if(!rq_data) {
           self.$toast({
             message:'请先登录再进行操作',
             duration:2000
           });
           setTimeout(() => {
             self.$router.push('/login');
           }, 2000);
         }else{
           self.getUrlTime();
           self.allLoadedCharge = true;
         }

       },

       methods:{
        back() {
          this.$router.back(-1);
        },
         navChange(index){
             if(index == 1){
                 this.getUrlTime();
                 this.allLoaded = false;
             }else if(index == 2){
               this.getCharge();
               this.allLoadedCharge = false;
               this.pageIndexCharge = 1;
             }
         },
         //获取URL上面时间
         getUrlTime:function () {
             const self = this;
             self.timeData = self.$route.query.time;
             self.spreadCodeData = self.$route.query.spreadCode;
           var param = {
             regParam:{
               paged:{
                 pageIndex:1,
                 pageSize:self.pagesize,
               },
               statisticDate:self.timeData,
               spreadCode:self.spreadCodeData
             }
           };

           var paramObj = {
             'apiName':'youyu.statistic.queryAllSpreadDayRegListByLoginSpread',
             'param':param
           };
           self.$mPost(paramObj,function(callbackData){
           self.tableData = callbackData.data.data.data;
           self.total = callbackData.data.data.total+1;
             if(self.total <= self.pagesize){
               self.allLoaded = true;
             }
             self.pageCount = Math.ceil(self.total/self.pagesize)+1;

           },function(errCallbackData){
             self.$toast({
               message:errCallbackData.data.message,
               duration:2000
             });
             setTimeout(() => {
               self.$router.push('/login');
             }, 2000);

           },function(catchCallbackData){
             self.$toast({
               message:catchCallbackData.message,
               duration:2000
             });
           });
         },
         loadBottom(){
           this.pageIndex += 1;
           if (this.pageIndex == this.pageCount) {
             this.allLoaded = true;
             this.$refs.loadOver.style.display = "block";
             return ;
           }
           setTimeout(() => {
             const self = this;
             var param = {
               regParam:{
                 paged:{
                   pageIndex:self.pageIndex,
                   pageSize:self.pagesize,
                 },
                 statisticDate:self.timeData,
                 spreadCode:self.spreadCodeData
               }
             };
             var paramObj = {
               'apiName':'youyu.statistic.queryAllSpreadDayRegListByLoginSpread',
               'param':param
             };
             self.$mPost(paramObj,function(callbackData){
               self.tableData = self.tableData.concat(callbackData.data.data.data);
               self.$refs.loadmore.onBottomLoaded();
             },function(errCallbackData){
               self.$toast({
                 message:errCallbackData.data.message,
                 duration:2000
               });
               setTimeout(() => {
                 self.$router.push('/login');
               }, 2000);

             },function(catchCallbackData){
               self.$toast({
                 message:catchCallbackData.message,
                 duration:2000
               });
             });
           }, 100);
         },
         //充值列表
         getCharge:function () {
           const self = this;
           self.timeData = self.$route.query.time;
           self.spreadCodeData = self.$route.query.spreadCode;
           var param = {
             chargeParam:{
               paged:{
                 pageIndex:1,
                 pageSize:self.pagesizeCharge,
               },
               statisticDate:self.timeData,
               spreadCode:self.spreadCodeData
             }
           };

           var paramObj = {
             'apiName':'youyu.statistic.queryAllSpreadDayChargeListByLoginSpread',
             'param':param
           };
           self.$mPost(paramObj,function(callbackData){
             self.goldData = callbackData.data.data.data;
             self.totalCharge = callbackData.data.data.total+1;
             if(self.totalCharge <= self.pagesizeCharge){
               self.allLoadedCharge = true;
             }
             self.pageCountCharge = Math.ceil(self.totalCharge/self.pagesizeCharge);
           },function(errCallbackData){
             self.$toast({
               message:errCallbackData.data.message,
               duration:2000
             });
             setTimeout(() => {
               self.$router.push('/login');
             }, 2000);

           },function(catchCallbackData){
             self.$toast({
               message:catchCallbackData.message,
               duration:2000
             });
           });
         },
         loadBottomCharge:function () {
           this.pageIndexCharge += 1;
           if (this.pageIndexCharge == this.pageCountCharge) {
             this.allLoadedCharge = true;
             this.isShow = true;
             return ;
           }
           setTimeout(() => {
             const self = this;
             var param = {
               chargeParam:{
                 paged:{
                   pageIndex:self.pageIndexCharge,
                   pageSize:self.pagesizeCharge,
                 },
                 statisticDate:self.timeData,
                 spreadCode:self.spreadCodeData
               }
             };
             var paramObj = {
               'apiName':'youyu.statistic.queryAllSpreadDayChargeListByLoginSpread',
               'param':param
             };
             self.$mPost(paramObj,function(callbackData){
               self.goldData = self.goldData.concat(callbackData.data.data.data);
               self.$refs.loadCharge.onBottomLoaded();
             },function(errCallbackData){
               self.$toast({
                 message:errCallbackData.data.message,
                 duration:2000
               });
               setTimeout(() => {
                 self.$router.push('/login');
               }, 2000);

             },function(catchCallbackData){
               self.$toast({
                 message:catchCallbackData.message,
                 duration:2000
               });
             });
           }, 100);
         },
         //时间格式化
         dateFormat:function(date) {
           if (date == undefined || !date) {
             return "";
           }
           return this.$moment(date).format("YYYY-MM-DD :MM:SS");
         },
         formatDate(_now) {
           var now = new Date( _now );
           var year = now.getFullYear();
           var month = (now.getMonth()+1)>9 ? (now.getMonth()+1) : "0"+(now.getMonth()+1);
           var date = now.getDate()>9 ? now.getDate() : "0"+now.getDate();

           var hour = now.getHours()>9 ? now.getHours() : "0"+now.getHours();
           var minute = now.getMinutes()>9 ? now.getMinutes() : "0"+now.getMinutes();
           var second = now.getSeconds()>9 ? now.getSeconds() : "0"+now.getSeconds();

           return year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second ;
         },
       }


  }

</script>
<style>
  body{margin:0;width: 100%;height: 100%;}
  .nav{margin-top: 40px;width: 100%;}
  .mint-navbar{border-bottom: 2px solid #26A2FF;}
  .mint-navbar .mint-tab-item.is-selected{background: #cccccc;color: #FF8F2A;font-size: 22px;}
  .row-item{overflow: hidden;}
  .row-title{
    font-size:14px;
  }
  .clearfix{zoom:1}.clearfix:after{content:'';clear:both;display:block;height:0;visibility:hidden}
 .box{clear: both;}
  .col-item{
    text-align:center !important;
    width: 50%;
    float:left;
    padding:10px 0;
    overflow: hidden;
    background-image:linear-gradient(180deg, #fff, #fff 50%, transparent 50%);;
  }
  .col-items{
    text-align:center !important;
    width: 50%;
    float:left;
    padding:10px 0;
    overflow-x: auto;
    background-image:linear-gradient(180deg, #fff, #fff 50%, transparent 50%);;
  }
  .col-title{
    font-size:16px;
    font-weight: bolder;
  }
  .loadOver{
    height:50px;
    line-height:50px;
    width:100%;
    position:absolute;
    bottom:0;
    z-index:99;
    background:#fff;
    display:none;
  }
  .mint-loadmore-bottom{margin: 0;}
</style>
